<template>
  <!--
  el-upload上传组件关键属性说明
  默认 通过action和on-success进行图片上传，不需要调用axios
  1、action 设置上传图片的后台地址
  2、show-file-list 是否显示上传图片列表
  3、on-success 调用action后台上传接口成功之后，执行这个属性回调函数
  4、before-upload 绑定回调函数做上传之前的校验
 -->
  <el-upload
    class="avatar-uploader"
    action="#"
    :http-request="upload"
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
  >
    <!-- 上传成功之后 做回显 -->
    <img
      v-if="staffPhoto"
      :src="staffPhoto"
      class="avatar"
    >
    <!-- 默认显示+号图标 -->
    <i
      v-else
      class="el-icon-plus avatar-uploader-icon"
    />
    <el-progress
      v-show="isShow"
      type="line"
      :percentage="percent"
      status="success"
      :stroke-width="6"
    />

  </el-upload>
</template>

<script>
// 1、导入腾讯云cos云sdk方法构造函数
import COS from 'cos-js-sdk-v5'
// 2、初始化得到云cos操作的实例
const cos = new COS({
  SecretId: 'AKIDOilqhHabMp2ye29zZtwiDSQ7WfX8RUGk', // 身份识别ID
  SecretKey: 'EBtWtzoMcbKmxrTqxmKcePt63k9H9k47' // 身份秘钥
})
export default {
  name: 'UploadImg',
  props: {
    staffPhoto: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 上传成功之后存储的图片地址
      // imageUrl: ''
      // 图片上传进度
      percent: 0,
      isShow: false
    }
  },
  methods: {
    // 上传之前对图片大小和格式做校验
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 自定义上传的函数
    upload (res) {
      console.log(res)
      // 调用腾讯云进行上传
      this.isShow = true
      if (res.file) {
        // 执行上传操作
        cos.putObject({
          /* 存储桶名字，必须字段 */
          Bucket: 'img-1302927411',
          /* 存储桶所在地域，必须字段 ap-beijing */
          Region: 'ap-beijing',
          /* 文件名 */
          Key: res.file.name,
          // 上传模式, 标准模式
          StorageClass: 'STANDARD',
          // 上传文件对象
          Body: res.file,
          // 上传进度
          onProgress: (progressData) => {
            // 上传完成之前一直执行，会把图片的上传进度返给前端
            this.percent = progressData.percent * 100
          }
        }, (err, data) => {
          // err 如果上传失败会返回错误信息（如果上传成功err的值null）
          // data 上传成功服务器返回的图片数据
          console.log(err || data)
          // 上传成功之后
          if (data.statusCode === 200) {
            this.$emit('update:staffPhoto', `https://${data.Location}`)
            setTimeout(() => {
              this.isShow = false
              this.percent = 0
            }, 800)
          }
        })
      }
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
